import React, { useState } from 'react';
import { Form, Input, Radio, Checkbox, Button } from 'antd';

import DynamicFormItem from '../DynamicFormItem';

const Questionnaire = ({ data }) => {
  const [form] = Form.useForm();
  const [isOtherOptionSelected, setIsOtherOptionSelected] = useState(false);
  const [IsOptionSelected, setIsOptionSelected] = useState(false);

  const handleOptionChange = (selectedOptions, question) => {
    const isOtherSelected = selectedOptions.includes("其他");
    setIsOtherOptionSelected(isOtherSelected);
  };

  const handleRadioChange = (dependentQuestions, selectedOption) => {
    console.log(dependentQuestions.dependentQuestions.condition === selectedOption)
    const IsOptionSelected = (dependentQuestions.dependentQuestions.condition === selectedOption);
    setIsOptionSelected(IsOptionSelected);

  };

  const handleFormSubmission = async () => {
    try {
      const formValues = await form.validateFields();
      console.log(formValues);
    } catch (validationError) {
      console.log('Validation failed:', validationError);
    }
  };

  return (
    <Form
      form={form}
      name="dynamic_form"
      className="p-8"
      onFinish={handleFormSubmission}
      layout='vertical'
    >
      {data.map((section, sectionIndex) => (
        <div key={sectionIndex} className="mb-8">
          <h2 className="text-xl mb-4">{section.title}</h2>

          {section.questions.map((question, questionIndex) => (
            <div key={questionIndex} className="mb-4">
              {question.type === 'TextInput' && (
                <Form.Item
                  label={question.label}
                  className='w-full'
                  name={question.label}
                  required={question.required}
                  rules={[{ required: question.required, message: 'This field is required!' }]}
                >
                  <Input placeholder={question.placeholder} />
                </Form.Item>
              )}

              {question.type === 'CheckboxGroup' && (
                <>
                  <Form.Item
                    label={question.label}
                    name={question.label}
                    required={question.required}
                    rules={[{ required: question.required, message: 'This field is required!' }]}
                  >
                    <Checkbox.Group
                      options={question.options}
                      onChange={(selectedOptions) => handleOptionChange(selectedOptions, question)}
                    />
                  </Form.Item>
                  {isOtherOptionSelected && <DynamicFormItem name={`${question.label}_other`} />}
                </>
              )}

              {question.type === 'RadioGroup' && (
                <>
                  <Form.Item
                    label={question.label}
                    name={question.label}
                    required={question.required}
                    rules={[{ required: question.required, message: 'This field is required!' }]}
                  >
                    <Radio.Group
                      onChange={(e) => handleRadioChange(question, e.target.value)}
                      options={question.options}
                    />
                  </Form.Item>
                  {
                    question.dependentQuestions && IsOptionSelected &&
                    <Form.Item
                      label={question.dependentQuestions.label}
                      className='w-full'
                      name={question.dependentQuestions.label}
                      required={question.dependentQuestions.required}
                      rules={[{ required: question.dependentQuestions.required, message: 'This field is required!' }]}
                    >
                      <Input placeholder={question.dependentQuestions.placeholder} />
                    </Form.Item>}
                </>
              )}

              {question.type === 'DynamicTextInput' && (
                <>
                  <label className="block mb-2">{question.label}</label>
                  <DynamicFormItem name={question.label} placeholder={question.placeholder} />
                </>
              )}
            </div>
          ))}
        </div>
      ))}

      <Form.Item>
        <Button className='bg-sky-700 h-10 w-20' type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default Questionnaire;
